<template>
    <div class="org">
        <div class="header">
            <div class="search-obj">
                <div class="search-obj-name">用户名:</div><el-input v-model="searchParams.orgName"
                    style="width: 400px;height: 30px;" placeholder="用户名" clearable />
            </div>
            <div class="search-obj">
                <div class="search-obj-name">用户账号:</div><el-input v-model="searchParams.orgState"
                    style="width: 400px;height: 30px;" placeholder="用户账号" clearable />
            </div>
                 <div class="search-obj">
                <div class="search-obj-name">所属机构:</div><el-input v-model="searchParams.orgState"
                    style="width: 400px;height: 30px;" placeholder="所属机构" clearable />
            </div>
            <div class="search-obj">
                <div class="search-obj-name">创建时间:</div><el-input v-model="searchParams.createTime"
                    style="width: 400px;height: 30px;" placeholder="创建时间" clearable />
            </div>
            <div class="search-obj">
                <div class="search-obj-name">创建人:</div><el-input v-model="searchParams.createUser"
                    style="width: 400px;height: 30px;" placeholder="创建人" clearable />
            </div>
        </div>
        <div class="submit">
            <el-button color="rgba(200, 16, 46, 100)" @click="search">查询</el-button>
            <el-button color="rgb(220,220,220)" @click="reSubmit">重置</el-button>
        </div>
        <div class="table">
            <el-table :data="data" style="width: 100%;" stripe :header-cell-style="tableHeaderStyle">
                <el-table-column prop="userid" label="用户ID" width="180" align="center" />
                <el-table-column prop="userName" label="用户名" width="180" align="center" />
                <el-table-column prop="userAccount" label="用户账号" width="180" align="center" />
                <el-table-column prop="userOrg" label="所属机构" width="180" align="center" />
                <el-table-column prop="userState" label="用户状态" min-width="180" align="center" />
                <el-table-column prop="createTime" label="创建时间" min-width="180" align="center" />
                <el-table-column prop="createUser" label="创建人" min-width="180" align="center" />
                <el-table-column label="操作" fixed="right" min-width="120" align="center">
                    <template #default>
                        <el-button color="rgb(255,200,71)">查看</el-button>
                        <el-button color="rgb(255,200,71)">删除</el-button>
                        <el-button color="rgb(255,200,71)">禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination size="small" background layout="prev, pager, next" :total="total" class="mt-4"
            v-model:current-change="currentChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
let searchParams = ref({})

const data = ref([
    {
        userid:1,
        userName:"张*",
        userAccount:"159*****2213",
        userOrg:"工商银行",
        userState:"启用",
        createTime:"2024-10-01- 12:15:26",
        createUser:"管理员"
    }
])

const search = () => {

}

const reSubmit = () => {
    searchParams.value = {}
}
</script>
<style lang="scss" scoped>
.header {
    margin-left: 80px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;


    .search-obj {
        width: 480px;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .search-obj-name {
            text-align: end;
            width: 100px;
            margin-right: 10px;
        }

    }
}

.submit {
    position: absolute;
    right: 100px;
    margin-top: 40px;
}

.table {
    margin-top: 100px;
}
</style>